<template>
  <el-container>
    <el-header>
      <h1>SkateStore后台管理系统</h1>
      <router-link to="/adminlogin" v-if="!userinfo.userid">
        <span> <a>请登录</a> </span>
      </router-link>
      <router-link to="" v-else>
        <span>
          <a @click="adminout()">{{ userinfo.username }}</a>
        </span>
      </router-link>
    </el-header>
    <el-container>
      <el-aside width="200px">
        <el-menu
          default-active="2"
          class="el-menu-vertical-demo"
          @open="handleOpen"
          @close="handleClose"
          background-color="#545c64"
          text-color="#fff"
          active-text-color="#ffd04b"
        >
          <el-submenu index="1">
            <template slot="title">
              <i class="el-icon-location"></i>
              <span>用户管理</span>
            </template>
            <el-menu-item-group class="el-menu-item-group">
              <el-menu-item>
                <router-link to="/userlist">
                  <span class="splb">用户列表</span>
                </router-link>
              </el-menu-item>
            </el-menu-item-group>
          </el-submenu>
          <el-submenu index="2">
            <template slot="title">
              <i class="el-icon-location"></i>
              <span>商品管理</span>
            </template>
            <el-menu-item-group>
              <el-menu-item>
                <router-link to="/storelist">
                  <span class="splb">商品列表</span>
                </router-link>
              </el-menu-item>
            </el-menu-item-group>
          </el-submenu>
          <el-submenu index="3">
            <template slot="title">
              <i class="el-icon-location"></i>
              <span>订单管理</span>
            </template>
            <el-menu-item-group>
              <el-menu-item>
                <router-link to="/orderlist"
                  ><span class="splb">订单列表</span>
                </router-link>
              </el-menu-item>
            </el-menu-item-group>
          </el-submenu>
        </el-menu>
      </el-aside>
      <router-view></router-view>
    </el-container>
  </el-container>
</template>
<script>
export default {
  data() {
    return {
      userinfo: {
        //保存session值
        userid: window.sessionStorage.getItem("adminid"),
        username: window.sessionStorage.getItem("adminname"),
      },
    };
  },
  methods: {
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    },
    //退出登录
    adminout() {
      this.$confirm("确定要退出登录吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          //清除session值
          window.sessionStorage.removeItem("adminid");
          window.sessionStorage.removeItem("adminname");
          location.href = "/adminlogin";
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消",
          });
        });
    },
  },
};
</script>
<style>
h1 {
  float: left;
}
span a {
  color: white;
  float: right;
}
.el-header {
  background-color: #000000;
  color: rgb(255, 255, 255);
  text-align: center;
  line-height: 60px;
}

.el-aside {
  background-color: #d3dce6;
  color: #333;
  text-align: center;
  line-height: 200px;
}

.el-main {
  background-color: #e9eef3;
  color: #333;
  text-align: center;
  line-height: 160px;
}
.el-container {
  height: 100vh;
}
.splb {
  color: white;
}
</style>